<template>
  <div>
    <h5>Count.vue组件</h5>
    <p>count:{{Am}}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  //vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：
  //要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！
  // props: ['init'],

  props: {
    init: {
      //在声明自定义属性时，可以通过 default 来定义属性的默认值
      default: 0,
      //在声明自定义属性时，可以通过 type 来定义属性的值类型
      type:Number,
      //在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值
      required: true
    }
  },
  data(){
    return {
      Am: this.init
    }
  },
  methods: {
    add() {
      this.Am += 1
    }
  }
}
</script>

<style lang="less">

</style>

<